<!DOCTYPE html>
<html>
{% block head %}
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>爬虫后台管理系统</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href="../../static/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../../static/style/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../static/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="../../static/dist/css/skins/_all-skins.min.css">
  <link rel="stylesheet" href="../../static/plugins/iCheck/flat/blue.css">
  <link rel="stylesheet" href="../../static/plugins/switch/bootstrap-switch.css">
</head>
{% endblock %}

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="{%url 'index' %}" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <!--<span class="logo-mini"><img src="../../static/imgs/logo_shape_only_shadow.png" height="50px" width="50px"></span>-->

      <span class="logo-mini"><img src="../../static/imgs/logo.png" height="50px" width="50px"></span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><img src="../../static/imgs/logo.png" height="45px" width="45px" style="margin-top:-5px;"><b>分布式爬虫</b>后台</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>

      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <li class="dropdown messages-menu">
           <a target="blank" href="http://123.207.230.48:8085/">Graphite监控</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      {% block sidebar %}
      <ul class="sidebar-menu">
        <li class="header">主控面板</li>
        <li>
          <a href="{% url 'tasks' %}">
            <i class="fa fa-dashboard"></i> <span>爬虫状态</span>
          </a>
        </li>
        <li>
          <a href="{%url 'layout'%}">
            <i class="fa fa-tasks"></i> <span>布置任务</span>
            <!-- <span class="pull-right-container">
              <small class="label pull-right bg-green">new</small>
            </span> -->
          </a>
        </li>
        <li>
          <a href="{% url 'machinelist' %}">
            <i class="fa fa-medium"></i> <span>从机管理</span>
          </a>
        </li>
        <li>
          <a href="{% url 'processlist' %}">
            <i class="fa fa-th-large"></i> <span>进程管理</span>
          </a>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-sort-alpha-asc"></i> <span>自动结构</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="{%url 'extractsinger' %}"><i class="fa fa-circle-o"></i>正文抽取</a></li>
            <li><a href="{%url 'extractmultiple' %}"><i class="fa fa-circle-o"></i>批量抽取</a></li>
          </ul>
        </li>
        <li class="treeview">
          <a href="#">
            <i class="fa fa-map-o"></i> <span>正文测试</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="{%url 'extractarticle' %}"><i class="fa fa-circle-o"></i>批量抽取</a></li>
            <li><a href="{%url 'testarticles' %}"><i class="fa fa-circle-o"></i>批量测试</a></li>
            <li><a href="{%url 'testsingle' %}"><i class="fa fa-circle-o"></i>单例测试</a ></li>

          </ul>
        </li>
        <li>
          <a href="{% url 'charts' %}">
            <i class="fa fa-pie-chart"></i> <span>数据统计</span>
          </a>
        </li>
        <li class="active">
          <a href="{% url 'introduce'%}">
            <i class="fa fa-book"></i> <span>使用说明</span>
          </a>
        </li>

        <li>
          <a href="{% url 'settings' %}">
            <i class="fa fa-cog"></i> <span>系统设置</span>
          </a>
        </li>
      </ul>
      {% endblock %}
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        仪表盘
        <small>控制面板</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">仪表盘</li>
        <li class="active">仪表盘</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      {% block maincontent %}
      <div class="box box-primary">
          <div class="box-header with-border">
            <h2 class="box-title">设置</h2>
          </div>
          <!-- /.box-header -->
          <div class="box-body">

            <div class="form-group">
              <label class="col-sm-1 control-label">IP代理</label>
              <div class="col-sm-10">
                 <input id="switch-state" type="checkbox" ><!--checked="checked"-->
              </div>
          </div>
            <div id="ips_div" class="form-group" style="margin-top: 50px;display: none">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;代理IP用回车分割，格式为“http(https)://ip:port”</p>
              <textarea disabled="disabled" id="proxy" class="form-control" rows="8" placeholder="http://192.168.1.110:8080
https://192.168.1.113:80"></textarea>
                  <!-- {% if error2 %}
                    <p style="color: red;">{{error2}}</p>
                  {% endif %} -->
                  <br>
                  <button id="submit" type="button" class="btn btn-primary pull-right">确认</button>
                  <button id="edit" type="button" class="btn btn-default pull-right" style="margin-right: 10px;">编辑</button>
                  
            </div>
            
          </div>
          <!-- /.box-body -->
        </div>
        
      {% endblock %}
    </section>

    <!-- /.content -->

  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.3.8
    </div>
    <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights
    reserved.
  </footer>

</div>
<!-- ./wrapper -->

{% block script %}
<!-- jQuery 2.2.3 -->
<script src="../../static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../static/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="../../static/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../static/dist/js/demo.js"></script>
<script src="../../static/plugins/switch/bootstrap-switch.min.js"></script>
<script type="text/javascript">
  $(function() {
    $("#switch-state").bootstrapSwitch();
    //获取ip代理
    $.post('/crawlermanage/settings/', {'op':'getproxy'}, function(data) {
      if(data!=null){
        var proxy_list = data['proxy'];
        var status = data['status'];
        proxy_list = proxy_list.replace('#', '\n');
        $('#proxy').val(proxy_list);
        if(status == '1') {
          var state = $("#switch-state").bootstrapSwitch('state');
          if(state==false) {
            $("#switch-state").bootstrapSwitch('toggleState');
          }
          $("#ips_div").fadeIn('slow');
          $('#ips_div').css('display', '');
        } else {
          if(state==true) {
            $("#switch-state").bootstrapSwitch('toggleState');
          }
          $("#ips_div").fadeOut("slow");
        }
      }
    }, 'json');

  })

  //开关按钮事件监听
  $("#switch-state").on('switchChange.bootstrapSwitch', function(event, state) {
    //console.log(this); // DOM element
    //console.log(event); // jQuery event
    //console.log(state); // true | false
    //打开开关textarea出现，关掉开关textarea隐藏
    if(state==true) {
      $("#ips_div").fadeIn('slow');
      $('#ips_div').css('display', '');
    } else {
      $("#ips_div").fadeOut("slow");
    }
    //修改代理状态数据库
    $.post('/crawlermanage/settings/', {'op':'switch','state':state});
  });
  //单击编辑按钮
  $('#edit').click(function() {
    $('#proxy').attr('disabled',false);
  })
  //单击确定按钮
  $("#submit").click(function() {
    var proxy = $('#proxy').val();
    var status = $("#switch-state").bootstrapSwitch('state');
    //修改数据库代理ip
    $.post('/crawlermanage/settings/', {'op':'setproxy',proxy:proxy,status:status});
    $('#proxy').attr('disabled',true);
  });
</script>
{% endblock %}

</body>
</html>

